<template>
  <div class="tabbar" :style="style" :key="$route.path">
    <!-- 导航 -->

    <nav v-if="smallwidth === false" style="display: flex;" class="nav">

      <router-link to="/home">
        <div>
          数据大屏
        </div>
      </router-link>

      <router-link to="/device">
        <div>
          菜单列表
        </div>
      </router-link>

      <router-link to="/help">
        <div>
          帮助中心
        </div>
      </router-link>

      <!-- <router-link to="/insectalerts">
        <div>
          虫情预警防治
        </div>
      </router-link> -->

      <!-- <router-link to="/test">
        <div>
          测试
        </div>
      </router-link> -->

    </nav>

    <Dropdown trigger="click" v-else>
      <a> {{ title }}<Icon type="ios-arrow-down"></Icon> </a>
      <template #list>
        <DropdownMenu @click="getItemName">
          <DropdownItem name="首页"><router-link to="/home">数据大屏</router-link></DropdownItem>
          <DropdownItem name="设备管理"><router-link to="/device">菜单列表</router-link></DropdownItem>
          <DropdownItem name="帮助中心"><router-link to="/help">帮助中心</router-link></DropdownItem>
        </DropdownMenu>
      </template>
    </Dropdown>

    <!-- 标题 -->
    <dv-decoration-11 class="titleback">
      <div v-if="ishome === true">
        虫情监测预警可视化大屏
      </div>
      <div v-else>虫情监测预警系统</div>
    </dv-decoration-11>

    <!-- 时间 个人 退出 -->
    <div class="time">
      <div v-if="smallwidth === false">
        <p>{{ times }}</p>
      </div>
      <div>
        <i class="iconfont icon-geren2"></i>&nbsp;
        <!-- <u class="name">{{ name }}</u> -->
      </div>
      <div>
        <i title="退出登录" style="cursor: pointer;" class="iconfont icon-dianyuan" @click="modal=true"></i>
      </div>
    </div>
  </div>

  <Modal
        v-model="modal"
        title="是否登出？"
        @on-ok="ok"
        >
    </Modal>

</template>

<script>
import "../../assets/icon/iconfont.css";
import {
  Menu,
  MenuItem,
  Dropdown,
  DropdownMenu,
  DropdownItem,
  Icon,
  Modal,
  Notice
} from "view-ui-plus";
export default {
  data() {
    return {
      times: "", //格式化之后的当前时间
      name: null, //用户名
      ishome: false, //是否为首页
      router: null, //路由
      style: {
        //导航栏切换样式
        color: "white",
        display: "flex",
        justifyContent: "space-between",
        padding: "5px 0",
        borderBottom: "1px solid gray",
      },
      // width:null,//屏幕宽
      smallwidth: false,
      title: null, //下拉菜单显示名称
      modal:false

    };
  },
  props: ["title"],
  components: {
    Menu,
    MenuItem,
    Dropdown,
    DropdownMenu,
    DropdownItem,
    Icon,
    Modal,
    Notice
  },
  created() {
    this.getTimes();
    this.getname();
    this.getwidth();
  },
  watch: {
    $route: {
      handler(val) {
        this.router = "/" + val.name;
        if (val.name == "home") {
          this.ishome = true;
          this.style.backgroundColor = "#fffffff";
        } else {
          this.style.backgroundColor = "#515A6E";
        }
      },
      // 深度观察监听
      deep: true,
      immediate: true,
    },
  },

  methods: {
    getTimes() {
      setInterval(this.getTimesInterval, 1000);
    },
    getTimesInterval: function () {
      let _this = this;
      let year = new Date().getFullYear(); //获取当前时间的年份
      let month = new Date().getMonth() + 1; //获取当前时间的月份
      let day = new Date().getDate(); //获取当前时间的天数
      let hours = new Date().getHours(); //获取当前时间的小时
      let minutes = new Date().getMinutes(); //获取当前时间的分数
      let seconds = new Date().getSeconds(); //获取当前时间的秒数
      //当小于 10 的是时候，在前面加 0
      if (hours < 10) {
        hours = "0" + hours;
      }
      if (minutes < 10) {
        minutes = "0" + minutes;
      }
      if (seconds < 10) {
        seconds = "0" + seconds;
      }
      //拼接格式化当前时间
      _this.times =
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds;
    },
    getname() {
      this.name = localStorage.getItem("token");
    },
    getwidth() {
      // console.log(window.innerWidth);
      // this.width = window.innerWidth;
      this.$nextTick(() => {
        this.smallwidth = window.innerWidth < 720 ? true : false;
      });
    },
    // getItem(e){
    //   e.target.parentElement.className = 'active'
    //   console.log(e.target.parentElement);

    // },
    getItemName(e) {
      setTimeout(() => {
        // console.log(e.target.innerHTML);
        this.title = e.target.innerHTML;
      }, 0);
    },
    loginout(){
      const token = localStorage.getItem('token');
      if(token){
        localStorage.removeItem('token');
        Notice.success({
                    title: '登出成功',
                    deration:1
                });
        this.$router.push('/login');
      }
    },
    ok () {
            this.loginout();
            }
  },
  mounted() {
    window.addEventListener("resize", () => {
      return (() => {
        this.$nextTick(() => {
          this.smallwidth = window.innerWidth < 720 ? true : false;
        });
        // this.width = window.innerWidth;
      })();
    });
  },
  beforeDestroy() {
    if (this.times) {
      clearInterval(this.getTimesInterval);
    }
  },
};
</script>

<style lang="less" scoped>
.active {
  border-bottom: 2px solid skyblue;
}

.tabbar {
  z-index: 999;
  width: 100%;
  position: fixed;
  top: 0;

  .nav {
    // position: relative;
    width: 24rem;
    background-color: rgba(0, 0, 0, 0);
    border-bottom: none;
    justify-content: space-around;

    a {
      width: 30%;
      position: relative;
      font-size: calc(100vw * 16 / 1920);
      color: white;
      text-align: center;

      div {
        width: 100%;
        text-align: center;
        position: absolute;
        padding: 1rem 0;
      }

    }
  }

  .router-link-active {
    color: #2d8cf0;

    div {
      border-bottom: 2px solid skyblue;

    }
  }

  .titleback {
    //总标题字体大小
    font-size: calc(100vw * 45 / 1920);
    width: 600px;
    height: 60px;

  }

  .time {
    width: 20rem;
    padding-right: 1%;
    display: flex;
    justify-content: space-around;
    transform: translateY(35%);
    font-size: calc(100vw * 20 / 1920) !important;

    div {
      text-align: center;
    }
  }
}

@media screen and (max-width: 720px) {
  .tabbar {
    width: 100%;
    font-size: calc(100vw * 12 / 1920) !important;

    .ivu-menu {
      width: 8rem;

      .ivu-menu-item {
        font-size: calc(100vw * 12 / 1920) !important;

      }
    }

    .ivu-dropdown {
      /deep/.ivu-dropdown-rel {
        transform: translateY(100%);
      }

      /deep/.ivu-select-dropdown {
        padding: 0 0 !important;

        .ivu-dropdown-menu {
          background-color: #515a6e !important;
        }
      }
    }

    .titleback {
      width: 13rem !important;
      font-size: calc(100vw * 16 / 1920) !important;
    }

    .time {
      width: 5rem !important;
    }
  }
}</style>
